<template>
  <!-- 页面列表 -->
  <el-aside width="200px">
    <el-col :span="12">
      <el-menu
        :default-active="$route.path"
        class="el-menu-vertical-demo"
        background-color="#e4b6b7"
        text-color="#fff"
        active-text-color="red"
      >
        <el-menu-item
          v-for="(item) in menuList"
          :index="item.path"
          :key="item.icon"
          @click="hash(item)"
        >
          <i :class="item.icon"></i>
          <span slot="title">{{item.title}}</span>
        </el-menu-item>
      </el-menu>
    </el-col>
  </el-aside>
</template>

<script>
export default {
  data() {
    return {
      menuList: [
        {
          path: "/home/",
          icon: "el-icon-s-home",
          title: "首页"
        },
        {
          path: "/member/",
          icon: "el-icon-user-solid",
          title: "会员管理"
        },
        {
          path: "/supplier/",
          icon: "el-icon-s-cooperation",
          title: "供应商管理"
        },
        {
          path: "/goods/",
          icon: "el-icon-s-goods",
          title: "商品管理"
        },
        {
          path: "/staff/",
          icon: "el-icon-user",
          title: "员工管理"
        }
      ]
    };
  },
  created() {
  },
  watch: {
  },
  methods: {
    hash(item) {
      this.$router.push(item.path);
    }
  },
  components: {}
};
</script>

<style scoped lang="scss">
//初始样式
.el-aside {
  background-color: #e4b6b7;
  color: #333;
  text-align: center;
}
.el-col-12 {
  width: 100%;
}

//列表
.el-menu-item {
  text-align: left;
}
</style>
